

<!-- 申请售后-提交申请 -->
<template>
	<view class="content">

		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="申请售后" rightBtnType="msgCenter" colorTheme="black" @toggleMenuListHandler="toggleMenuListHandler">
			</navHeader>
		</view>

		<!-- 商品信息 -->
		<view class="goodInfo-Container">
			<image class="goodImage" v-if="orderGoodsDetail.goodsBaseInfo" :src="imgSite + orderGoodsDetail.goodsBaseInfo.coverPicture" mode=""></image>
			<view class="goodNameSpec">
				<view class="goodName ellipsis2">
					{{orderGoodsDetail.goodsBaseInfo.goodsName}}
				</view>
				<view class="goodSpec ellipsis1">
					{{ orderGoodsDetail.goodsBaseInfo.attributes | getSpecStr }}
				</view>
			</view>
		</view>

		<!-- 售后信息 -->
		<view class="saleInfo-Container" @click="togglePopup('bottom', 'popup')">
			<view class="oneRow borderOneRpx">
				<view class="formLabel">
					<text class="mustInput">*</text> 售后类型
				</view>
				<view class="formValue">
					<view class="value">
						{{ arefundTypeName }}
					</view>
					<image :src="icon.rightBtn" mode=""></image>
				</view>
			</view>
			
			<!-- 地址 -->
			<view v-if="arefundType == 2" class="address-Container">
				<image class="addressIcon" :src="icon.addressIcon" mode=""></image>
				<view class="userInfo-Container">
					<view class="userInfo">
						<view class="userName ellipsis1">
							退货信息：<text>{{orderGoodsDetail.returnContractName}}</text>
						</view>
						<view class="phoneNumber">
							{{orderGoodsDetail.returnContractPhone}}
						</view>
					</view>
					<view class="addressInfo ellipsis2">
						{{orderGoodsDetail.returnAddress}}
					</view>
				</view>
			</view>
			
			<view class="oneRow">
				<view class="formLabel">
					<text class="mustInput">*</text> 退款金额
				</view>
				<view class="formValue">
					<view class="value redValue">
						￥<text>{{orderGoodsDetail.totalMoney/100}}</text>
					</view>
				</view>
			</view>
			<view v-if="orderGoodsDetail.waters > 0" class="oneRow">
				<view class="formLabel">
					<text class="mustInput">*</text> 水券金额
				</view>
				<view class="formValue">
					<view class="value redValue">
						￥<text>{{orderGoodsDetail.waters/100}}</text>
					</view>
				</view>
			</view>
			<view v-if="orderGoodsDetail.points > 0" class="oneRow">
				<view class="formLabel">
					<text class="mustInput">*</text> 积分金额
				</view>
				<view class="formValue">
					<view class="value redValue">
						￥<text>{{orderGoodsDetail.points}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 问题描述 -->
		<view class="saleInfo-Container applyDetail-Container">
			<view class="oneRow">
				<view class="formLabel">
					<text class="mustInput">*</text> 问题描述
				</view>
				<view class="formValue">
					<view class="value redValue">
						为了帮您更好的解决问题，请务必上传照片凭证
					</view>
				</view>
			</view>
			<uploadProof placeholderText="请描述申请售后服务的具体原因..." @contentChange="contentChange" :upLoadLists="upLoadLists" @deleteImage="deleteImage" @chooseImage="chooseImage"></uploadProof>
		</view>

		<!-- 提交申请 -->
		<view class="submitAddSale" @tap="submitAfterSale">
			提交申请
		</view>
		
		<!-- 详情菜单 -->
		<view v-if="showDetailMenu" @click="toggleMenuListHandler()" class="detailMenu-Container">
			<detailMenu></detailMenu>
		</view>
		
		
		<!-- 退款类型 -->
		<uni-popup ref="showpopup" :type="type">
			<view class="popup-content">
				<view class="title_name">退款类型</view>
				<view class="title_name select" @click="close(1)">直接退款</view>
				<view class="title_name select" @click="close(2)" style="border: none;">退货退款</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	import navHeader from '@/components/nav-header/nav-header';
	import detailMenu from "@/components/detailMenu/detailMenu";
	import uploadProof from "@/components/uploadProof/uploadProof";

	export default {
		filters: {
			
			//已选规格Str
			getSpecStr(json) {
				try{
					var str = "";
					json = JSON.parse(json.goodsCategoryAttr);
					for(var i = 0; i < json.length; i++) {
						str += (json[i]["value"] + ' ');
					}
					return str;
				}catch(e){
					return "";
				}
			}
		},
		components: {
			navHeader,
			detailMenu,
			uploadProof
		},
		computed: {
			...mapState(['imgSite', 'apiSite'])
		},
		data() {
			return {
				icon: {
					backBtn: "/static/images/common/return.png",
					menuBtn: "/static/images/common/menuBtn.png",
					rightBtn: "/static/images/afterSale/addSale/rightBtn.png",
					addressIcon: "/static/images/afterSale/addSale/addressIcon.png"
				},

				//详情菜单
				showDetailMenu: false,
				
				orderDetailId: "",
				orderGoodsDetail: {
					goodsBaseInfo: {},
				},
				
				upLoadLists: [],
				remarkContent: "",
				
				arefundType: 1,
				arefundTypeName: '直接退款',
				type: 'bottom'
			};
		},
		onLoad(options) {
			this.orderDetailId = options.orderDetailId;
			this.getOrderGoodsDetail_fun();
		},
		onShow() {
			this.showDetailMenu = false;
		},
		methods: {
			
			//详情菜单
			toggleMenuListHandler() {
				this.showDetailMenu = !this.showDetailMenu;
			},
			
			
			//商品信息
			getOrderGoodsDetail_fun() {
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/OrderApi/findOrderGoodsInfoByOrderDetailIdForApi',
					method: "POST",
					data: {
						orderDetailId: that.orderDetailId
					},
					success: function(res) {
						if(res.data.success) {
							var goodsData = res.data.response;
							goodsData.goodsBaseInfo = JSON.parse(goodsData.goodsBaseInfo);
							that.orderGoodsDetail = res.data.response;
						}
					}
				});
			},
			
			
			//描述内容
			contentChange(content) {
				this.remarkContent = content;
			},
			
			
			// 上传图片
			chooseImage() {
				
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
				
						// #ifdef APP-PLUS
							uni.uploadFile({
								url: that.apiSite + '/u_avt', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'file',
								formData: {
								}, 
								success: (uploadFileRes) => {
									that.upLoadLists.push(JSON.parse(uploadFileRes.data).response[0]);
								},
								fail:(res) =>{
									console.log(res);
								}
							});
						// #endif
						// #ifndef APP-PLUS
						that.$api.globalUtil.imgAjax({
							url: '/u_avt',
							method: 'POST',
							filePath: tempFilePaths[0],
							name: 'file',
							data: {},
							success: function(res) {
								that.upLoadLists.push(res.response[0]);
							}
						});		
						// #endif
					}
				});
			},
			
			
			// 删除图片
			deleteImage(index) {
				console.log("删除第："+index);
				this.upLoadLists.splice(index, 1);
			},
			
			
			// 打开退款类型弹窗
			togglePopup(type, open) {
				this.type = type;
				this.$nextTick(() => {
					this.$refs['show' + open].open();
				});
			},
			// 选择退款类型,关闭弹窗
			close(type) {
				this.$refs['showpopup'].close();
				this.arefundType = type;
				type == 1 ? (this.arefundTypeName = '直接退款') : (this.arefundTypeName = '退货退款');
			},
			
			
			// 提交售后
			submitAfterSale() {
				if(!this.remarkContent) {
					this.$api.msg("请输入问题描述!");
					return ;
				}
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/OrderApi/addReturnGoods',
					method: "POST",
					data: {
						orderDetailId: that.orderDetailId,
						reMoney: that.orderGoodsDetail.totalMoney,
						reWater: that.orderGoodsDetail.waters,
						rePoint: that.orderGoodsDetail.points,
						goodsId: that.orderGoodsDetail.goodsId,
						goodsCd: that.orderGoodsDetail.goodsCd,
						goodsName: that.orderGoodsDetail.goodsBaseInfo.goodsName,
						returnType: that.arefundType,//退货类型 1：退款；2：退款、退货（走审核物流）]
						returnImg1: that.upLoadLists.join(","),
						returnReason: that.remarkContent
					},
					success: function(res) {
						if(res.data.success) {
							that.$api.msg("申请成功");
							setTimeout(function() {
								uni.redirectTo({
									url: 'afterSaleList'
								});
							}, 2000);
						}
					}
				});
			}
		}
	}
</script>

<style lang="less">
	page,
	.content {
		background: #F5F5F5;
		height: 100%;
	}

	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}

	//商品信息
	.goodInfo-Container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		width: 100%;
		height: 202rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 0px 0px 16rpx 16rpx;

		.goodImage {
			width: 130rpx;
			height: 130rpx;
			border-radius: 10rpx;
		}

		.goodNameSpec {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 520rpx;
			height: 130rpx;

			.goodName {
				margin-top: 12rpx;
				max-width: 520rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}

			.goodSpec {
				max-width: 520rpx;
				height: 55rpx;
				line-height: 55rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				// font-weight:500;
				color: rgba(153, 153, 153, 1);
			}
		}
	}

	//售后信息
	.saleInfo-Container {
		margin-top: 20rpx;
		padding: 0 30rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 16rpx;

		.oneRow {
			display: flex;
			justify-content: space-between;
			position: relative;
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;

			&.borderOneRpx:after {
				border-top: 0;
				border-left: 0;
				border-right: 0;
				border-color: rgba(238, 238, 238, 1);
			}

			.formLabel {
				height: 90rpx;
				line-height: 90rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				// font-weight:500;
				color: rgba(102, 102, 102, 1);
			}

			.formValue {
				display: flex;
				align-items: center;
				margin-left: auto;

				.value {
					height: 90rpx;
					line-height: 90rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					// font-weight:500;
					color: rgba(51, 51, 51, 1);
				}

				.redValue {
					color: #FE5E49;
				}

				image {
					margin-left: 10rpx;
					width: 10rpx;
					height: 17rpx;
				}
			}
		}
		
		// 地址信息
		.address-Container {
			display: flex;
			align-items: center;
			padding: 20rpx 50rpx 20rpx 20rpx;
			width:690rpx;
			height:131rpx;
			background:rgba(245,245,245,1);
			border-radius:10rpx;
			
			.addressIcon {
				width: 28rpx;
				height: 33rpx;
			}
			
			.userInfo-Container {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;
				width: 570rpx;
				font-size:22rpx;
				font-family:PingFang SC;
				color:rgba(102,102,102,1);
				
				.userInfo {
					display: flex;
					justify-content: space-between;
					width: 100%;
					
					.userName {
						max-width: 400rpx;
					}
					
					.phoneNumber {
						margin-left: auto;
					}
				}
				
				.addressInfo {
					margin-top: 10rpx;
				}
			}
		}
	}
	
	
	//退款类型
	.popup-content {
		width: 100%;
		height: 356rpx;
		background-color: white;
		border-radius: 16rpx 16rpx 0 0;
		.title_name {
			width: 690rpx;
			height: 103rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #666;
			font-size: 24rpx;
			margin: 0 auto 0 auto;
			border-bottom: 1rpx solid#EEEEEE;
		}
		.select {
			color: #333;
			font-size: 30rpx;
			height: 109rpx;
		}
	}


	//问题描述
	.applyDetail-Container {
		margin-top: 20rpx;
		padding-bottom: 45rpx;
		width: 750rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 16rpx;
	}


	//提交申请
	.submitAddSale {
		margin: 0 auto;
		margin-top: 106rpx;
		margin-bottom: 100rpx;
		width: 400rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #FE5E49;
		border-radius: 45rpx;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFang SC;
		// font-weight:500;
		color: rgba(255, 255, 255, 1);
	}
</style>



